<template>
    <el-container>
        <el-header>
            <span>欢迎{{uname}}使用员工管理系统</span>
            <div ><span @click="logout">退出</span></div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                    <!--default-active：默认页面
                        router：开启路由-->
                <el-menu
                        :default-active="MenuName"
                        class="el-menu-vertical-demo"
                        :router="true">
                    <el-menu-item index="/emp">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">员工管理</span>
                    </el-menu-item>
                    <el-menu-item index="/dept">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">部门管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            MenuName: '/emp'
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 通过 `vm` 访问组件实例
            vm.MenuName = to.path
        })
    },
    methods: {
        logout() {
            //清空session
            sessionStorage.clear()
            //回登录页面
            this.$router.push('/')
        }
    },
    computed: {
        uname() {
            //重新提交mutation
            let uname = sessionStorage.getItem("uname");
            // this.$store.commit("setUname", uname)
            this.$store.dispatch('setUserName', {uname})
            return this.$store.getters.getUname
        }
    }
}
</script>

<style scoped>
.el-header {
    background-color: #373d41;
}
.el-main {
    background-color: #eaedf1;
}
.el-container {
    height: 100%;
}
/*头部样式*/
.el-header {
    background-color: #373d41;
    display: flex;
    /*左右贴边*/
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
}
.el-header>div {
    display: flex;
    align-items: center;
}
.el-header>div>span {
    cursor: pointer;
}
.el-header span {
    margin-left: 15px;
}
</style>